<script setup lang="ts">
import { ref } from 'vue'
import * as accountApi from '@/api/account'
import { message } from 'ant-design-vue'

const myModal = ref()

let robotId = ref<string>('')
let onlyType = ref<string>('wx')
const showModal = (id: string, type = 'wx') => {
  myModal.value?.showModal()
  robotId.value = id
  onlyType.value = type
}

import type { SelectProps } from 'ant-design-vue'
const rechargeTypeList = ref<SelectProps['options']>([
  {
    label: '在线支付',
    value: 1,
  },
  {
    label: '卡密激活',
    value: 2,
  },
])
const timeList = ref<SelectProps['options']>([
  {
    label: '一个月',
    value: 1,
  },
  {
    label: '一年',
    value: 2,
  },
])

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})

let labelCol = { span: 6 }
interface FormState {
  rechargeType: number
  code?: string
  time?: number
}
const formState = ref<FormState>({
  rechargeType: 2,
})

let loading = ref<boolean>(false)

const handleActive = async () => {
  loading.value = true

  let params = {
    code: formState.value.code,
    robotId: robotId.value,
  }

  // @ts-ignore
  onlyType.value === 'wx' ? (params.channel = 1) : (params.channel = 3)

  // console.log('params=', params)

  try {
    const { state, message: msg } = await accountApi.openCard(params)
    if (state === 200) {
      message.success('激活成功')
      myModal.value?.cancelModal()
      emit('refresh')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

const handlePay = () => {
  message.warning('暂不支持线上支付，点击右侧微信图标，联系客服获取折扣优惠！')
}
</script>

<template>
  <MyModal ref="myModal" title="充值时长" :top="35">
    <template #content>
      <div style="display: grid; place-items: center">
        <a-form ref="loginForm" :model="formState" :label-col="labelCol" style="width: 400px">
          <a-form-item label="充值方式" name="rechargeType">
            <a-select v-model:value="formState.rechargeType" placeholder="请选择" allowClear>
              <a-select-option
                v-for="(item, index) in rechargeTypeList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item v-if="formState.rechargeType == 2" name="code" label="卡密序列号">
            <template #help>点击右侧微信图标，联系客服获取折扣优惠！</template>
            <a-input v-model:value="formState.code" placeholder="卡密序列号"></a-input>
          </a-form-item>

          <a-form-item v-if="formState.rechargeType == 1" label="充值时长" name="time">
            <template #help v-if="formState.time == 1">费用：99元</template>
            <template #help v-if="formState.time == 2">费用：999元</template>
            <a-select v-model:value="formState.time" placeholder="请选择充值时长" allowClear>
              <a-select-option v-for="(item, index) in timeList" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item style="text-align: center">
            <a-button
              type="primary"
              block
              :loading="loading"
              style="margin-top: 15px"
              v-if="formState.rechargeType == 1"
              @click="handlePay"
            >
              <span>立即支付</span>
            </a-button>

            <a-button
              type="primary"
              block
              :loading="loading"
              style="margin-top: 15px"
              v-if="formState.rechargeType == 2"
              @click="handleActive"
            >
              <span>确定激活</span>
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </template>
  </MyModal>
</template>
